<template>
	<view class="container">
		<view class="pad-30 radius24 ">
			<view class="radius20 betweenX pad-24 bg-white mar-bottom-20 " v-for="(item,index) in payList" :key="index">
				<view class="color-text font-28">{{item.name}}</view>
				<view @click="hanldeTypePay(item)">
					<view class="icon-box">
						<u-icon v-if="pay == item.val" size="20" color="#0055FE" name="checkbox-mark"></u-icon>
					</view>
				</view>
			</view>

			<view class="betweenX button-bottom centerXY">
				<view @click="hanldeCancel" class="btn mar-left-20">取消</view>
				<view @click="confirmPayment" class="btn mar-left-20 button-style">确定支付</view>
			</view>
		</view>

		<my-popup content="您确定支付吗？" :show="isPopup" @cancel="isPopup = false,hanldeCancel()"
			@confirm="throttle(hanldeConfirm,2000)"></my-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		defineEmits
	} from 'vue';
	import {
		payServiceOrder,
		userBalancePayConfirm
	} from '@/api/index.js'

	import {
		throttle
	} from '@/node_modules/uview-plus';

	const emits = defineEmits(['confirmPayment']);
	// 接收参数
	const props = defineProps({
		orderNos: {
			type: Object
		}
	})

	const isPopup = ref(false);

	const pay = ref(0);
	const payList = ref([
		// #ifdef MP-WEIXIN
		{
			name: '微信支付',
			type: 'weChat',
			val: "30"
		},
		// #endif
		// {
		// 	name: '余额支付',
		// 	type: 'balance',
		// 	val: "10"
		// }
	])

	const hanldeTypePay = (item) => {
		console.log(item);
		pay.value = item.val;
	}

	// 跳转去订单
	const hanldeCancel = () => {
		uni.switchTab({
			url: '/pages/order/order/order'
		})
	}

	// 二次确定支付
	const hanldeConfirm = () => {
		if (props.orderNos.length == 0) {
			return;
		}

		payServiceOrder({
			order_nos: props.orderNos,
			pay_plat: pay.value,
			openid: uni.getStorageSync('wxInfo').openid,
			// client_os: "wx_mini"
		}).then(info => {
			if (pay.value == 10) {
				userBalancePayConfirm({
					trade_no: info.data.trade_no
				}).then(payVal => {
					uni.$u.toast(payVal.msg);
					hanldeCancel();
					isPopup.value = false;
				})
			} else if (pay.value == 30) {

				let upay = info.data.pay_data;
				let orderInfo = {
					package: upay.package, // 固定值
					nonceStr: upay.nonceStr, // 随机字符串
					timeStamp: upay.timeStamp, // 时间戳（单位：秒）
					signType: "RSA",
					paySign: upay.paySign, // 签名，这里用的 MD5 签名
				}

				uni.requestPayment({
					provider: "wxpay", //固定值为"wxpay"
					...orderInfo,
					success: function(res) {
						hanldeCancel();
						isPopup.value = false;
					},
					fail: function(err) {
						console.log('支付失败:' + JSON.stringify(err));
					}
				});
			}
		})
	}

	// 确定支付方式
	const confirmPayment = () => {
		if (pay.value == '') {
			uni.$u.toast('请选择支付方式');
			return;
		}

		isPopup.value = true;
		// emits('confirmPayment', payList[pay.value].type);
	}
</script>
<style scoped lang="scss">
	.container {
		height: 50vh;
	}

	.icon-box {
		width: 40rpx;
		flex-shrink: 0;
		height: 40rpx;
		border: 1rpx solid #c8c9cc;
		border-radius: 50%;
	}

	.button-bottom {
		width: 100%;
		padding: 35rpx 40rpx;
		box-sizing: border-box;
		background: white;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		z-index: 2;
	}

	.btn {
		width: 100%;
		height: 100rpx;
		border-radius: 50rpx;
		border: 2rpx solid #C1C1C1;
		line-height: 100rpx;
		text-align: center;
	}
</style>